<template>
  <view class="contain">
    <web-view :webview-styles="webviewStyles" :src="url" @message="postMessage"></web-view>
  </view>
</template>

<script>
// #ifdef APP-PLUS
var screenWidth = plus.screen.resolutionWidth
var margin = 80,
  iconWidth = 45,
  icontextSpace = 10,
  textHeight = 12;
var left1 = margin / 360 * screenWidth;
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 2)) / 2;
var left2 = left1 + iconWidth + iconSpace*2;
var left3 = left1 + (iconWidth + iconSpace) * 2;
var top1 = 75;
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1;
var nvMask;
var nvImageMenu;
// #endif

export default {
  // components: { uniPopup },
  data () {
    return {
      webviewStyles: {
        progress: {
          color: '#FF3333'
        }
      },
      url: '',
      shareConfig: {},
      popupParam: 'bottom',
	  hospital: '复旦大学附属上海市第五人民医院',
	  department: '小儿内科',
	  title: '副主任'
    }
  },
  methods: {
    updateQueryStringParameter (uri, key, value) {
      if (value) {
        if (uri.indexOf("?") > -1) {
          uri = uri + "&" + key + "=" + value
        } else {
          uri = uri + "?" + key + "=" + value
        }
      }
      return uri;
    },
    // 分享到微信、朋友圈
    onShare (scene) {
      let that = this;
        uni.share({
          provider: 'weixin',
          scene: scene,
          type: 0,
          href: this.url,
          title: "邀请患者",
          summary: "这是描述",
          imageUrl: "http://gzf.liangyicloud.xyz/h5/images/logo_icon.png",
          success: function (res) {
            uni.showToast({
            	icon: 'none',
            	title:'分享成功',
            	duration:1000
            })
          },
          fail: function (err) {
            uni.hideLoading();
            let errMsg = err.errMsg;
            if (errMsg.indexOf('-98') > 0) {
              errMsg = '微信未安装'
            }
            uni.showToast({ title: errMsg, icon: 'none' });
            // that.$refs.popupShare.close();
          }
        });
      
    },
    // 添加分享事件
    initShare () {
      // #ifdef APP-PLUS
      let view = plus.nativeObj.View.getViewById('nvImageShare');
      if (!view) {
        console.log('ddd')
        this.createView();
        nvImageMenu.addEventListener('click', this.shareClick)
      }
      // #endif
    },
    // 分享view点击事件
    shareClick (e) {
      if (e.clientY > 75 && e.clientY < 155) { //点击了图标按钮
        var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
        var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
        var iCol = -1
        if (e.clientX >= left1 && e.clientX < (left2 - (iconSpace / 2))) {
          iCol = 0
        } else if (e.clientX >= left2 && e.clientX < (left3 - (iconSpace / 2))) {
          iCol = 1
        } else if (e.clientX >= left3 && e.clientX < (left4 - (iconSpace / 2))) {
          iCol = 2
        }
        if (iRow == 0) {
          iClickIndex = iCol
        }
        console.log("点击按钮的序号: " + iClickIndex);
        if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
          var strProvider = "",
            strScene = ""
          switch (iClickIndex) {
            case 0:
              strProvider = "weixin"
              strScene = "WXSceneSession"
              break;
            case 1:
              strProvider = "weixin"
              strScene = "WXSenceTimeline"
              break;
            case 2:
              this.onClip();
              nvMask.hide();
              nvImageMenu.hide();
              break;
          }
          if (strProvider != "") { //点击了0-1序号的这4个按钮
            this.onShare(strScene);
            nvMask.hide();
            nvImageMenu.hide();
          }
        }
      }
    },
    // 创建分享视图
    createView () {
      // 先创建遮罩层
      nvMask = new plus.nativeObj.View("nvMaskShare", {
        top: '0px',
        left: '0px',
        height: '100%',
        width: '100%',
        backgroundColor: 'rgba(0,0,0,0.2)'
      });
      nvMask.addEventListener("click", function () { //处理遮罩层点击
        nvMask.hide();
        nvImageMenu.hide();
      });

      // 创建底部图标菜单
      nvImageMenu = new plus.nativeObj.View("nvImageShare", {
        bottom: '0px',
        left: '0px',
        height: '178px',
        width: '100%',
        backgroundColor: '#f9f9f9'
      });
      // 绘制底部图标菜单的内容
      nvImageMenu.draw([{
        tag: 'rect', //底部取消按钮的顶部边线
        color: '#fff',
        position: {
          top: '0',
          height: '44px'
        }
      },
      {
        tag: 'font',
        text: '分享至',
        textStyles: {
          size: '14px'
        },
        position: {
          top: '0px',
          height: '44px'
        }
      },
      {
        tag: 'rect', //底部取消按钮的顶部边线
        color: '#e6e6e6',
        position: {
          top: '44px',
          height: '1px'
        }
      },
      {
        tag: 'img',
        id: 'imgwechatfriend',
        src: '/static/img/article/weix.png',
        position: {
          top: top1,
          left: left1,
          width: iconWidth,
          height: iconWidth
        }
      },
      {
        tag: 'font',
        id: 'fontwechatfriend',
        text: '微信好友',
        textStyles: {
          size: textHeight,
          color: '#999',
        },
        position: {
          top: top1 + iconWidth + icontextSpace,
          left: left1,
          width: iconWidth,
          height: textHeight
        }
      },
      {
        tag: 'img',
        id: 'imgwechatmoments',
        src: '/static/img/article/pyq.png',
        position: {
          top: top1,
          left: left2,
          width: iconWidth,
          height: iconWidth
        }
      },
      {
        tag: 'font',
        id: 'fontwechatmoments',
        text: '朋友圈',
        textStyles: {
          size: textHeight,
          color: '#999',
        },
        position: {
          top: top1 + iconWidth + icontextSpace,
          left: left2 - 2.5,
          width: iconWidth + 5,
          height: textHeight
        }
      }
      ])
    },
	
  },
  onHide () {
    // nvImageMenu.removeEventListener('click', this.shareClick)
    // if (nvImageMenu.isVisible()) {
    nvImageMenu.hide()
    nvMask.hide()
	this.shareConfig = {};
    // }
  },
  onBackPress () {
    //监听back键，关闭弹出菜单
    // nvImageMenu.removeEventListener('click', this.shareClick)
    if (nvImageMenu.isVisible()) {
      nvImageMenu.hide()
      nvMask.hide()
      return true
    }
  },
  onNavigationBarButtonTap () {
    nvMask.show()
    nvImageMenu.show() //5+应支持从底部向上弹出的动画
  },
	
		onLoad(opt){
			
			this.id = opt.id?opt.id:10;
			
			if(uni.getStorageSync("userInfo").name){
				this.name = uni.getStorageSync("userInfo").name;
			}else if(opt.name){
				this.name = opt.name;
			}
			
			if(uni.getStorageSync("userInfo").title){
				this.title = uni.getStorageSync("userInfo").title;
			}else if(opt.title != undefined){
				this.title = opt.title;
			}
			
			if(uni.getStorageSync("userInfo").hospital){
				this.hospital = uni.getStorageSync("userInfo").hospital;
			}else if(opt.hospital != undefined){
				this.hospital = opt.hospital;
			}
			
			if(uni.getStorageSync("userInfo").department){
				this.department = uni.getStorageSync("userInfo").department;
			}else if(opt.department != undefined){
				this.department = opt.department;
			}
			
			this.url = "http://gzf.liangyicloud.xyz/h5/index.html#/?id="+this.id+"&name="+this.name
					+"&title="+this.title+"&hospital="+this.hospital+"&department="+this.department
					+"&token="+uni.getStorageSync('auth_token');
		},
		
		onShow() {
			// #ifdef APP-PLUS
		  let viewMask = plus.nativeObj.View.getViewById('nvMaskShare');
		  if(viewMask) {
		    viewMask.close()
		  }
		  let viewShare = plus.nativeObj.View.getViewById('nvImageShare');
		  if(viewShare) {
		    viewShare.close()
		  }
		  this.initShare();
		  // #endif
		}
		
	}
</script>

<style>
.contain{overflow: auto; background: #FFFFFF;}
</style>
